<template>
  <el-row class="container">
    <v-head :account="account"/>
    <el-col :span="24" class="main">
      <el-col id="div" :span="3">
        <sider :msg="list"/>
      </el-col>
      <el-col :span="21" id="divs" class="content-wrapper">
        <section class="contentCon">
          <div id="contentCon">
            <router-view></router-view>
          </div>
        </section>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
  import VHead from './components/header/Header.vue'
  import Sider from './components/Sider.vue'
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    name: 'Home',
    components: {
      'v-head': VHead,
      Sider
    },
    data () {
      return {
        account: '',
        list: []
      }
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    mounted () {
      this.account = sessionStorage.getItem('username')
//      window.document.getElementById('contentCon').style.height = window.innerHeight - 240
      window.document.getElementById('div').style.height = window.innerHeight - 80 + 'px'
//      window.document.getElementById('divs').style.height = window.innerHeight - 98 + 'px'
      axios({
        method: 'get',
        url: `${this.BASE_URL}/menu/getMenu`,
        responseType: 'json',
        params: {
          account: this.account
        }
      }).then((response) => {
        this.list = response.data.data
      }).catch(() => {
        this.loading = false
      })
    }
  }
</script>
<style scoped>
  .el-menu-item {
    height: auto;
  }

  .el-submenu .el-menu-item {
    min-width: inherit !important;
  }

  .container {
    padding-top: 12px;
    height: 100%;
    margin-left: -8px;
    background-color: #F2F2F2;
  }

  .el-menu-vertical-demo {
    background-color: #545c64;
    border-top: ridge 3px;
  }

  #div {
    /*height: auto;*/
    background-color: #307198;
    overflow: auto;
  }

  /*#divs {*/
    /*!*height: auto;*!*/
    /*overflow: auto;*/
  /*}*/

  .el-menu--dark {
    background-color: #307198;
  }
</style>
